<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}}</title>
    <!-- 引入 Ace 编辑器相关脚本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
        charset="utf-8"></script>
    <!-- 引入 jQuery -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
        }

        /* 容器样式 */
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #ffffff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .navbar a {
            color: #3c3c3c;
            text-decoration: none;
            margin: 0 15px;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .navbar a:hover {
            color: #40a9ff;
        }

        .navbar .login {
            background-color: #40a9ff;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .navbar .login:hover {
            background-color: #1890ff;
        }

        /* 主要内容区域样式 */
        .part1 {
            display: flex;
            flex-grow: 1;
            overflow: hidden;
            background-color: #ffffff;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        /* 左侧题目描述区域 */
        .left_desc {
            width: 50%;
            padding: 20px;
            overflow-y: auto;
            border-right: 1px solid #e8e8e8;
        }

        .left_desc h3 {
            margin-bottom: 15px;
            font-size: 1.5em;
            color: #1a1a1a;
        }

        .left_desc pre {
            white-space: pre-wrap;
            font-family: 'Courier New', Courier, monospace;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
        }

        /* 右侧代码编辑器区域 */
        .right_code {
            width: 50%;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            /*  添加此行  */
        }

        .ace_editor {
            flex-grow: 1;
        }

        /* 底部提交区域 */
        .part2 {
            padding: 15px;
            background-color: #ffffff;
            border-top: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .btn-submit {
            background-color: #52c41a;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .btn-submit:hover {
            background-color: #389e0d;
        }

        .result {
            flex-grow: 1;
            margin-right: 20px;
        }

        /* 难度标签样式 */
        .difficulty {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: 10px;
            font-weight: bold;
        }

        .easy {
            background-color: #52c41a;
            color: white;
        }

        .medium {
            background-color: #faad14;
            color: white;
        }

        .hard {
            background-color: #f5222d;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div>
                <a href="/"><i class="fas fa-home"></i> 首页</a>
                <a href="/all_questions"><i class="fas fa-list"></i> 题库</a>
                <a href="#"><i class="fas fa-trophy"></i> 竞赛</a>
                <a href="#"><i class="fas fa-comments"></i> 讨论</a>
                <a href="#"><i class="fas fa-briefcase"></i> 求职</a>
            </div>
            <a class="login" href="#"><i class="fas fa-user"></i> 登录</a>
        </div>

        <!-- 主要内容区域 -->
        <div class="part1">
            <!-- 左侧题目描述 -->
            <div class="left_desc">
                <h3>
                    <span id="number">{{number}}</span>.{{title}}
                    <span class="difficulty {{star}}">{{star}}</span>
                </h3>
                <pre>{{desc}}</pre>
            </div>
            <!-- 右侧代码编辑器 -->
            <div class="right_code">
                <div id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></div>
            </div>
        </div>

        <!-- 底部提交区域 -->
        <div class="part2">
            <div class="result"></div>
            <button class="btn-submit" onclick="submit()"><i class="fas fa-paper-plane"></i> 提交代码</button>
        </div>
    </div>

    <script>
        // 初始化 Ace 编辑器
        var editor = ace.edit("code");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");
        editor.setFontSize(16);
        editor.getSession().setTabSize(4);
        editor.setReadOnly(false);
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

        // 提交代码函数
        function submit() {
            var code = editor.getSession().getValue();
            var number = $("#number").text();
            var judge_url = "/judge/" + number;
            $.ajax({
                method: 'Post',
                url: judge_url,
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    'code': code,
                    'input': ''
                }),
                success: function (data) {
                    show_result(data);
                }
            });
        }

        // 显示结果函数
        function show_result(data) {
            var result_div = $(".result");
            result_div.empty();
            var _status = data.status;
            var _reason = data.reason;
            var reason_label = $("<p>", { text: _reason });
            reason_label.appendTo(result_div);
            if (_status == 0) {
                var _stdout = data.stdout;
                var _stderr = data.stderr;
                var stdout_label = $("<pre>", { text: _stdout });
                var stderr_label = $("<pre>", { text: _stderr });
                stdout_label.appendTo(result_div);
                stderr_label.appendTo(result_div);
            }
        }
    </script>
    <!--PC版-->
    <div id="SOHUCS" sid={{number}}.{{title}}></div>
    <script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js"></script>
    <script type="text/javascript">
        window.changyan.api.config({
            appid: 'cyxvREibp',
            conf: 'prod_0eeee7deaa033b896c3fd301b0e2c3d3'
        });
    </script>
</body>

</html>